<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>红包中心 - 社交红包列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #FF5252;
            --secondary: #FFD700;
            --light: #FFF8E1;
            --dark: #E63946;
            --gray: #757575;
            --light-gray: #F5F5F5;
            --border-radius: 12px;
            --card-shadow: 0 3px 10px rgba(255, 82, 82, 0.15);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #FFF5F5;
            color: #333;
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: #333;
            font-size: 20px;
        }
        
        /* 红包标签切换 */
        .redpack-tabs {
            display: flex;
            background-color: white;
            border-bottom: 1px solid #eee;
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .redpack-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .redpack-tab {
            flex: 1;
            flex-shrink: 0;
            padding: 14px 0;
            text-align: center;
            font-size: 15px;
            border: none;
            background: none;
            color: var(--gray);
            position: relative;
        }
        
        .redpack-tab.active {
            color: var(--primary);
            font-weight: 500;
        }
        
        .redpack-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20%;
            right: 20%;
            height: 3px;
            background-color: var(--primary);
            border-radius: 3px;
        }
        
        /* 红包列表容器 */
        .redpack-container {
            padding: 12px;
        }
        
        /* 通用红包样式 */
        .redpack-item {
            margin-bottom: 12px;
            border-radius: var(--border-radius);
            overflow: hidden;
            background-color: white;
            box-shadow: var(--card-shadow);
            position: relative;
            transition: transform 0.2s ease;
        }
        
        .redpack-item:hover {
            transform: translateY(-2px);
        }
        
        .redpack-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
        }
        
        .sender-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
        }
        
        .sender-info {
            flex: 1;
        }
        
        .sender-name {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .redpack-time {
            font-size: 12px;
            color: var(--gray);
        }
        
        /* 普通红包样式 */
        .normal-redpack {
            background: linear-gradient(135deg, #FF5252, #E63946);
            color: white;
        }
        
        .normal-redpack .redpack-content {
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .redpack-msg {
            font-size: 16px;
            font-weight: 500;
        }
        
        .redpack-icon {
            font-size: 24px;
        }
        
        .normal-redpack .redpack-footer {
            background-color: white;
            padding: 10px 16px;
            text-align: center;
            font-size: 13px;
            color: var(--gray);
        }
        
        /* 拼手气红包样式 */
        .lucky-redpack .redpack-content {
            padding: 16px;
        }
        
        .lucky-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .lucky-amount {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
        }
        
        .lucky-count {
            font-size: 13px;
            color: var(--gray);
        }
        
        .lucky-list {
            display: flex;
            overflow-x: auto;
            padding-bottom: 8px;
            gap: 10px;
        }
        
        .lucky-person {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 50px;
        }
        
        .lucky-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--dark);
            margin-bottom: 4px;
        }
        
        .lucky-name {
            font-size: 11px;
            text-align: center;
            color: #333;
        }
        
        .lucky-money {
            font-size: 12px;
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 任务红包样式 */
        .task-redpack .redpack-content {
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .task-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--primary);
        }
        
        .task-info {
            flex: 1;
        }
        
        .task-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 4px;
        }
        
        .task-desc {
            font-size: 12px;
            color: var(--gray);
            margin-bottom: 6px;
        }
        
        .task-progress {
            height: 6px;
            background-color: #eee;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background-color: var(--secondary);
            border-radius: 3px;
        }
        
        .task-redpack .redpack-footer {
            background-color: #f9f9f9;
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .task-reward {
            font-size: 14px;
            color: var(--primary);
            font-weight: 500;
        }
        
        .task-btn {
            padding: 6px 14px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }
        
        /* 过期红包样式 */
        .expired-redpack {
            filter: grayscale(1);
            opacity: 0.7;
        }
        
        .expired-redpack .redpack-content {
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .expired-msg {
            font-size: 15px;
            color: var(--gray);
        }
        
        .expired-icon {
            font-size: 20px;
            color: var(--gray);
        }
        
        /* 红包状态标签 */
        .redpack-tag {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .tag-unopened {
            background-color: var(--secondary);
            color: #fff;
        }
        
        .tag-opened {
            background-color: #e3f2fd;
            color: #1976d2;
        }
        
        .tag-expired {
            background-color: #f5f5f5;
            color: var(--gray);
        }
        
        /* 空状态 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            text-align: center;
        }
        
        .empty-icon {
            font-size: 60px;
            color: #ffccd5;
            margin-bottom: 20px;
        }
        
        .empty-text {
            font-size: 16px;
            color: var(--gray);
            margin-bottom: 24px;
        }
        
        .empty-btn {
            padding: 8px 24px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 500;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eee;
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--gray);
            font-size: 10px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
        }
        
        /* 红包弹窗 */
        .redpack-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            padding: 20px;
        }
        
        .modal-content {
            width: 100%;
            max-width: 320px;
            background-color: white;
            border-radius: 16px;
            overflow: hidden;
            text-align: center;
            animation: popIn 0.3s ease;
        }
        
        @keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            70% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .modal-header {
            background: linear-gradient(135deg, #FF5252, #E63946);
            padding: 20px 16px;
            color: white;
        }
        
        .modal-title {
            font-size: 18px;
            margin-bottom: 8px;
        }
        
        .modal-amount {
            font-size: 32px;
            font-weight: 700;
            margin: 10px 0;
        }
        
        .modal-body {
            padding: 20px 16px;
        }
        
        .open-btn {
            background-color: var(--secondary);
            color: #d35400;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 24px;
            margin: 10px 0;
            box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
        }
        
        .modal-footer {
            padding: 16px;
            border-top: 1px solid #eee;
        }
        
        .close-btn {
            width: 100%;
            padding: 10px;
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">红包中心</div>
        <button class="nav-btn" id="moreBtn">
            <i class="fas fa-cog"></i>
        </button>
    </div>
    
    <!-- 红包标签切换 -->
    <div class="redpack-tabs">
        <button class="redpack-tab active" data-tab="all">全部红包</button>
        <button class="redpack-tab" data-tab="unopened">未拆开</button>
        <button class="redpack-tab" data-tab="opened">已拆开</button>
        <button class="redpack-tab" data-tab="expired">已过期</button>
        <button class="redpack-tab" data-tab="task">任务红包</button>
    </div>
    
    <!-- 红包列表容器 -->
    <div class="redpack-container">
        <!-- 1. 普通红包 - 未拆开 -->
        <div class="redpack-item normal-redpack" data-type="unopened">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/64/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">张小明</div>
                    <div class="redpack-time">今天 10:23</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="redpack-msg">恭喜发财，大吉大利！</div>
                <div class="redpack-icon">
                    <i class="fas fa-envelope"></i>
                </div>
            </div>
            <div class="redpack-footer">
                点击拆开红包
            </div>
            <span class="redpack-tag tag-unopened">未拆开</span>
        </div>
        
        <!-- 2. 拼手气红包 - 已拆开 -->
        <div class="redpack-item lucky-redpack" data-type="opened">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/65/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">公司年会群</div>
                    <div class="redpack-time">昨天 18:45</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="lucky-info">
                    <div class="lucky-amount">¥8.88</div>
                    <div class="lucky-count">28人已抢 · 共100元</div>
                </div>
                <div class="lucky-list">
                    <div class="lucky-person">
                        <div class="lucky-avatar">你</div>
                        <div class="lucky-name">你</div>
                        <div class="lucky-money">¥8.88</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">王</div>
                        <div class="lucky-name">王总</div>
                        <div class="lucky-money">¥12.50</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">李</div>
                        <div class="lucky-name">李姐</div>
                        <div class="lucky-money">¥5.20</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">赵</div>
                        <div class="lucky-name">小赵</div>
                        <div class="lucky-money">¥3.66</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">孙</div>
                        <div class="lucky-name">老孙</div>
                        <div class="lucky-money">¥6.88</div>
                    </div>
                </div>
            </div>
            <span class="redpack-tag tag-opened">已拆开</span>
        </div>
        
        <!-- 3. 任务红包 -->
        <div class="redpack-item task-redpack" data-type="task">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/91/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">邀请有礼活动</div>
                    <div class="redpack-time">3天前</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="task-icon">
                    <i class="fas fa-user-plus"></i>
                </div>
                <div class="task-info">
                    <div class="task-title">邀请3位新用户注册</div>
                    <div class="task-desc">完成任务即可领取红包奖励</div>
                    <div class="task-progress">
                        <div class="progress-bar" style="width: 66%;"></div>
                    </div>
                    <div class="mt-1 text-end text-xs text-gray">2/3 人</div>
                </div>
            </div>
            <div class="redpack-footer">
                <div class="task-reward">奖励 ¥20.00 红包</div>
                <button class="task-btn">去完成</button>
            </div>
        </div>
        
        <!-- 4. 过期红包 -->
        <div class="redpack-item expired-redpack" data-type="expired">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/92/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">老同学群</div>
                    <div class="redpack-time">1周前</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="expired-msg">春节快乐！迟到的祝福</div>
                <div class="expired-icon">
                    <i class="fas fa-envelope-open"></i>
                </div>
            </div>
            <span class="redpack-tag tag-expired">已过期</span>
        </div>
        
        <!-- 5. 拼手气红包 - 未拆开 -->
        <div class="redpack-item lucky-redpack" data-type="unopened">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/22/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">部门福利群</div>
                    <div class="redpack-time">今天 09:15</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="lucky-info">
                    <div class="lucky-amount">点击抢红包</div>
                    <div class="lucky-count">12人已抢 · 剩余3个</div>
                </div>
                <div class="lucky-list">
                    <div class="lucky-person">
                        <div class="lucky-avatar">张</div>
                        <div class="lucky-name">小张</div>
                        <div class="lucky-money">¥6.66</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">刘</div>
                        <div class="lucky-name">刘哥</div>
                        <div class="lucky-money">¥9.99</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">陈</div>
                        <div class="lucky-name">小陈</div>
                        <div class="lucky-money">¥3.20</div>
                    </div>
                    <div class="lucky-person">
                        <div class="lucky-avatar">
                            <i class="fas fa-plus"></i>
                        </div>
                        <div class="lucky-name">9人</div>
                        <div class="lucky-money">...</div>
                    </div>
                </div>
            </div>
            <span class="redpack-tag tag-unopened">未拆开</span>
        </div>
        
        <!-- 6. 任务红包 -->
        <div class="redpack-item task-redpack" data-type="task">
            <div class="redpack-header">
                <img src="https://picsum.photos/id/23/100/100" alt="发送者头像" class="sender-avatar">
                <div class="sender-info">
                    <div class="sender-name">每日签到</div>
                    <div class="redpack-time">今天 08:30</div>
                </div>
            </div>
            <div class="redpack-content">
                <div class="task-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="task-info">
                    <div class="task-title">连续签到7天</div>
                    <div class="task-desc">完成任务即可领取红包奖励</div>
                    <div class="task-progress">
                        <div class="progress-bar" style="width: 28%;"></div>
                    </div>
                    <div class="mt-1 text-end text-xs text-gray">2/7 天</div>
                </div>
            </div>
            <div class="redpack-footer">
                <div class="task-reward">奖励 ¥5.00 红包</div>
                <button class="task-btn">去签到</button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment nav-icon"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-red-envelope nav-icon"></i>
            <span>红包</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-wallet nav-icon"></i>
            <span>钱包</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 红包弹窗 -->
    <div class="redpack-modal" id="redpackModal">
        <div class="modal-content">
            <div class="modal-header">
                <div>张小明的红包</div>
                <div class="modal-title">恭喜发财，大吉大利！</div>
            </div>
            <div class="modal-body">
                <div>点击下方按钮拆开红包</div>
                <button class="open-btn" id="openRedpack">
                    <i class="fas fa-gift"></i>
                </button>
                <div id="redpackResult" style="display: none;">
                    <div class="modal-amount">¥6.66</div>
                    <div>恭喜您抢到红包！</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="close-btn" id="closeModal">关闭</button>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 红包标签切换
        const redpackTabs = document.querySelectorAll('.redpack-tab');
        const redpackItems = document.querySelectorAll('.redpack-item');
        
        redpackTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 切换标签状态
                redpackTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 筛选红包
                const tabType = this.getAttribute('data-tab');
                redpackItems.forEach(item => {
                    if (tabType === 'all' || item.getAttribute('data-type') === tabType) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
        
        // 红包点击事件
        const unopenedRedpacks = document.querySelectorAll('[data-type="unopened"]');
        const redpackModal = document.getElementById('redpackModal');
        const closeModal = document.getElementById('closeModal');
        const openRedpack = document.getElementById('openRedpack');
        const redpackResult = document.getElementById('redpackResult');
        
        unopenedRedpacks.forEach(redpack => {
            redpack.addEventListener('click', function() {
                // 重置弹窗状态
                redpackResult.style.display = 'none';
                openRedpack.style.display = 'block';
                // 显示弹窗
                redpackModal.style.display = 'flex';
            });
        });
        
        // 关闭弹窗
        closeModal.addEventListener('click', function() {
            redpackModal.style.display = 'none';
        });
        
        // 拆开红包
        openRedpack.addEventListener('click', function() {
            this.style.display = 'none';
            redpackResult.style.display = 'block';
            
            // 更新红包状态
            const firstUnopened = document.querySelector('[data-type="unopened"]');
            if (firstUnopened) {
                firstUnopened.setAttribute('data-type', 'opened');
                firstUnopened.querySelector('.redpack-tag').className = 'redpack-tag tag-opened';
                firstUnopened.querySelector('.redpack-tag').textContent = '已拆开';
            }
        });
        
        // 导航按钮
        document.getElementById('backBtn').addEventListener('click', function() {
            alert('返回上一页');
        });
        
        document.getElementById('moreBtn').addEventListener('click', function() {
            alert('红包设置');
        });
        
        // 任务按钮
        const taskBtns = document.querySelectorAll('.task-btn');
        taskBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const taskName = this.closest('.task-redpack').querySelector('.task-title').textContent;
                alert(`去完成任务：${taskName}`);
            });
        });
    </script>
</body>
</html>
